<template>
    <div class="form">
        <el-form :model="form">
            <el-form-item label="员工编号" :label-width="formLabelWidth">
                <el-input v-model="form.employeeId" autocomplete="off" />
            </el-form-item>
            <el-form-item label="员工姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="员工状态" :label-width="formLabelWidth">
                <el-select v-model="form.status" placeholder="员工状态" clearable>
                    <el-option v-for="status in EmployeeStatus" :key="status.code" :label="status.label"
                        :value="status.code" />
                </el-select>
            </el-form-item>
            <el-form-item label="联系方式" :label-width="formLabelWidth">
                <el-input v-model="form.phone" autocomplete="off" />
            </el-form-item>
            <el-form-item label="员工地址" :label-width="formLabelWidth">
                <el-input v-model="form.address" autocomplete="off" />
            </el-form-item>
            <el-form-item label="员工职位" :label-width="formLabelWidth">
                <el-input v-model="form.position" autocomplete="off" />
            </el-form-item>
            <el-form-item label="驾驶证号" :label-width="formLabelWidth">
                <el-input v-model="form.driverLicense" autocomplete="off" />
            </el-form-item>
        </el-form>
    </div>
    <div class="dialog-footer">
        <el-button @click="returnPage" type="warning">返回界面</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="addEmployee">确认添加</el-button>
    </div>

</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router';
import { addEmployeeList } from '../../api/employee.js'
import { ElMessage } from 'element-plus';
import { EmployeeStatus } from '../../utils/status'

const router = useRouter();

const formLabelWidth = '80px'

const form = reactive({
})

const reset = ()=>{
    form.employeeId='',
    form.name='',
    form.status = '',
    form.phone = '',
    form.address = '',
    form.position = '',
    form.driverLicense = ''
}

const returnPage =()=>{
    router.push("/employee")
}

const addEmployee = async()=>{
    try{
        const result = await addEmployeeList(form);
        if(result.data.code === 200){
            ElMessage.success('添加成功');
            router.push("/employee")
        }else{
            ElMessage.error('添加失败')
        }
    }catch(error){
        ElMessage.error('请检查填入信息，添加失败')
    }
}
</script>

<style scoped>
.form {
    width: 55%;
    /* border: 1px solid red; */
    margin: 0 auto;
}

.el-form-item {
    margin-top: 30px;
}

.dialog-footer {
    /* border: 1px solid slateblue; */
    width: 55%;
    margin: 0 auto;
    margin-top: 20px;
}

.el-button {
    float: right;
    margin-left: 20px;
}
</style>